import React from 'react'
import { ProductCard, Tag, Button } from 'react-vant';
import { useNavigate } from 'react-router-dom'
interface ShopData {
    _id: string, // 商店的唯一标识符
    title: string, // 商店标题
    integral: number, // 商店积分
    image: string, // 商店图片URL
    detail_image: string, // 商店详情图片URL
    like: number, // 商店点赞数
    follow: number, // 商店关注数
    shop_type: string, // 商店类型
    freight: number, // 商店运费
}
function ProductCard2({ content }: { content: ShopData}) {
    const navigate = useNavigate()
    const handleExchange = (id: string) => {
        navigate(`/order/${id}`)
    }

    const handleDetails = () => {
        navigate(`/details/${content._id}`)
    }

    return (
        <div className="animate__animated animate__bounceInLeft">
            <ProductCard
                key={content._id}
                price={content.integral}
                title={content.title}
                thumb={<img style={{width: '100%', height: '100%', borderRadius: '10px'}} onClick={() => handleDetails()} src={content.image} />}
                tags={
                    <>
                        <Tag plain type="danger" style={{ marginRight: 5 }}>
                            标签
                        </Tag>
                        <Tag plain type="danger">
                            标签
                        </Tag>
                    </>
                }
                footer={
                    <>
                        <Button size="mini"
                            round
                            plain
                            style={{
                                width: '9rem',
                                marginRight: 2,
                                background: 'red',
                                color: 'white'
                            }}
                            onClick={() => handleExchange(content._id)}
                        >
                            去兑换
                        </Button>
                    </>
                }
            />
        </div>
    )
}

export default React.memo(ProductCard2)